$(function () {
    initArtCateList()
})
let layer = layui.layer;

// 渲染类别类型
function initArtCateList () {
    // 发送ajax请求
    axios({
        url: '/my/article/cates'
    }).then(({ data: res }) => {
        if (res.status !== 0) {
            return layer.msg(res.message)
        }
        // 定义一个用来接收循环的数组
        let arr = []
        res.data.forEach(ele => {
            if (ele.Id < 0) {
                return;
            }
            arr.push(`
            <tr>
            <td>${ele.Id}</td>
             <td>${ele.name}</td>
             <td>${ele.alias}</td>
             <td><button id="updateBtn" class="layui-btn layui-btn-xs" data-id="${ele.Id}">修改</button>
              <button id="deleteBtn" class="layui-btn layui-btn-xs layui-btn-danger" data-id="${ele.Id}">删除</button></td>
            </tr>
            `)
        })
        $('tbody').empty().html(arr.join(""))
    })
}

// 需求2：点击按钮，弹出对话框
let indexAdd = 0;
$('#addBtn').on('click', function () {
    indexAdd = layer.open({
        type: 1,
        title: '添加文章类别',
        area: ['500px', '260px']
        , content: `
        <form id="addForm" class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">分类名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称" autocomplete="off"
                    class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">分类别名</label>
            <div class="layui-input-block">
                <input type="text" name="alias" required lay-verify="required" placeholder="请输入分类别名" autocomplete="off"
                    class="layui-input">
            </div>
        </div>
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </form>
        `
    });
})

// 需求3：添加文章分类
$('body').on('submit', '#addForm', function (e) {
    // 阻止默认行为
    e.preventDefault()
    // 发送ajax请求
    axios({
        method: 'POST',
        url: '/my/article/addcates',
        data: $('#addForm').serialize()
    }).then(({ data: res }) => {
        if (res.status != 0) {
            return layer.msg(res.message)
        }
        layer.msg(res.message)
        // 重置表单
        $('#addForm')[0].reset()
        // 重新渲染列表
        initArtCateList();
        // 关闭对话框
        layer.close(indexAdd)
    })
})

// 需求4：根据获取到的Id渲染当前分类
$('tbody').on('click', '#updateBtn', function () {
    let dataId = $(this).attr('data-id')
    // 弹出层
    indexAdd = layer.open({
        type: 1,
        title: '修改文章类别',
        area: ['500px', '260px']
        , content: `
        <form id="editForm" class="layui-form" action="" lay-filter="editForm">
        <input type="hidden" name="Id">
        <div class="layui-form-item">
            <label class="layui-form-label">分类名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required|refCate" placeholder="请输入分类名称" autocomplete="off"
                    class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">分类别名</label>
            <div class="layui-input-block">
                <input type="text" name="alias" required lay-verify="required|refCalias" placeholder="请输入分类别名" autocomplete="off"
                    class="layui-input">
            </div>
        </div>
        <div class="layui-input-block">
            <button id="Reupdate" class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
        </div>
    </form>
        `
    });
    // 发送ajax请求
    axios({
        url: '/my/article/cates/' + dataId
    }).then(({ data: res }) => {
        if (res.status != 0) {
            return layer.msg(res.message)
        }
        layui.form.val('editForm', res.data)
    })
})

// 需求5：点击确认修改 提交修改
$('body').on('submit', '#editForm', function (e) {
    e.preventDefault()
    // 发送ajax请求
    axios({
        method: 'POST',
        url: '/my/article/updatecate',
        data: $(this).serialize()
    }).then(({ data: res }) => {
        if (res.status != 0) {
            return layer.msg(res.message)
        }
        layer.msg("恭喜您，修改文章类别信息成功！")
    })
    // 关闭对话框
    layer.close(indexAdd)
    // 重新渲染列表
    initArtCateList();
})

// 需求6：点击删除，删除文章
$('body').on('click', '#deleteBtn', function () {
    let dataId = $(this).attr('data-id')
    layer.confirm('确认删除吗?', { icon: 3, title: '提示' }, function (index) {
        // 发送ajax
        axios({
            url: '/my/article/deletecate/' + dataId
        }).then(({ data: res }) => {
            if (res.status != 0) {
                return layer.msg(res.message)
            }
            layer.msg("恭喜您，删除文章类别成功！")
            // 重新渲染列表
            initArtCateList();
        })
        layer.close(index);
    });
})

$('.shuaxin').on('click', function () {
    // 重新渲染列表
    initArtCateList();
})